<!--  -->
<template>
  <div class="app">
     <div class="top">
         <el-row :gutter="24">
             <router-link to="/menu2/sub1">
             <el-col :span="4"><div class="grid-content bg-purple el-icon-back"></div></el-col>
             </router-link>
            <el-col :span="16"><div class="grid-content bg-purple">批量报关信息</div></el-col>
            <router-link to="/menu2/sub1">
            <el-col :span="4"><div class="grid-content bg-purple el-icon-close"></div></el-col>
            </router-link>
        </el-row>
     </div>
     <div class="content">
         <el-table
   :data="tableData"
    height="820"
    border
    style="width: 100%">
    <el-table-column
      label="图片"
      width="120">
      <template slot-scope="scope">
        <!-- <div v-for="(index, key) in scope.row.imgs" :key="key">
             <img :src="index"  min-width="70" height="70" />
           </div> -->
           <div>
             <img :src="scope.row.imgs" min-width="70" height="70" >
           </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="标题"
      width="500">
    </el-table-column>
    <el-table-column
      prop="address"
      label="中文报关"
      show-overflow-tooltip>
      <template slot-scope="scope">
        <el-input 
        v-model="scope.row.address"
        placeholder="中文报关" 
        clearable>
        </el-input>
      </template>
    </el-table-column>
     <el-table-column
      prop="address2"
      label="英文报关"
      show-overflow-tooltip>
      <template slot-scope="scope">
          <el-input 
          placeholder="英文报关"
          v-model="scope.row.address2" 
          clearable></el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="weight"
      label="重量(g)"
      show-overflow-tooltip>
      <template slot-scope="scope">
          <el-input 
          placeholder="重量"
          v-model="scope.row.weight"
          clearable>
          </el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="USD"
      label="价格(USD)"
      show-overflow-tooltip>
      <template slot-scope="scope">
          <el-input
          placeholder="价格"
           v-model="scope.row.USD" 
           clearable>
           </el-input>
      </template>
    </el-table-column>
    <el-table-column
      prop="customs"
      label="海关编码"
      show-overflow-tooltip>
      <template slot-scope="scope">
          <el-input 
          placeholder="海关编码"
          v-model="scope.row.customs"
           clearable>
           </el-input>
      </template>
    </el-table-column>
    <el-table-column
      label="是否含电"
      width="120">
      <template slot-scope="scope">
           <el-input 
          placeholder="是否"
          v-model="scope.row.label"
           clearable>
           </el-input>
          </template>
    </el-table-column>
  </el-table>
     </div>
     <div class="bottom">
           <el-button type="primary"  @click="go" size="mini" style="margin-right: 200px;">保存</el-button>
     </div>
    </div>
</template>

<script>
import axios from "axios";
import html from "../api/src";

export default {
  data () {
    return {
        tableData: [
        //     {
        //   date: '2016-05-03',
        //   name: '王小虎',
        //   address: "",
        //   address2: "",
        //   weight: "",
        //   USD:"",
        //   customs:"",
        //   name1:"",
        //   label : ""
        // }, 
        // {
        //   date: '2016-05-03',
        //   name: '王小虎',
        //   address: [],
        //   address2: [],
        //   weight: [],
        //   USD:[],
        //   customs:[],
        //   name1:[],
        //   label:'纯电'
        // },
      ],
      AmazonOrderId:[],
      data: [],
      str:[],
      multipleSelection: [],
      success: []//存储报关信息
      }
    },
    created(){
           console.log(this.$route.query)
           for(let i =0;i< this.$route.query.AmazonOrderId.length;i++){
             this.AmazonOrderId.push(this.$route.query.AmazonOrderId[i])
             this.str.push(this.$route.query.name[i])
             console.log(this.AmazonOrderId)
             console.log(this.str)
           }
          //  for(let i =0;i< this.$route.query.AmazonOrderId.length;i++){
          //    this.AmazonOrderId.push(this.$route.query.AmazonOrderId[i])
          //    this.str.push(this.$route.query.name[i])
          //    console.log(this.AmazonOrderId)
          //    console.log(this.str)
          //  }
           this.getcustomsdeclist() 
    },
  components: {},

  computed: {},

  mounted: {},

  methods: {
       toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      go(){
        //  this.data.push({
        //      OrderItemId: this.AmazonOrderId,
        //      ChineseCustomsDeclaration: "休闲鞋",//中文报关
        //      EnglishCustomsDeclaration: "casual sh",//英文报关
        //      Weight: "1", //重量
        //      Price: "15.0", // 价格
        //      CustomsCode: "", // 海关编码
        //      IsElectric: false //是否含电
        //   })
        // console.log(this.tableData[0].address)
        // console.log(this.tableData[0].address2)
        // console.log(this.tableData[0].weight)
        // console.log(this.tableData[0].USD)
        // console.log(this.tableData[0].customs)
        // console.log(this.tableData[0].label)
        for(let i = 0 ; i<this.tableData.length;i++){
          if(this.tableData[i].label == '否' ){
            this.tableData[i].label = false
          }else if(this.tableData[i].label == '是'){
             this.tableData[i].label = true
          }
          if(this.AmazonOrderId[i] !== undefined && this.tableData[i].address !== undefined &&
             this.tableData[i].address !== undefined && this.tableData[i].address2 !== undefined
             && this.tableData[i].weight !== undefined && this.tableData[i].USD !== undefined
             && this.tableData[i].customs !== undefined && this.tableData[i].label !== undefined
          ){
          this.data.push({
             OrderItemId: this.AmazonOrderId[i],
             ChineseCustomsDeclaration: this.tableData[i].address,//中文报关
             EnglishCustomsDeclaration: this.tableData[i].address2,//英文报关
             Weight: this.tableData[i].weight, //重量
             Price: this.tableData[i].USD, // 价格
             CustomsCode: this.tableData[i].customs, // 海关编码
             IsElectric: this.tableData[i].label //是否含电
          })
          
          console.log(this.data)
           axios({
          method: "post",
          url: html.domain + "orders/writecustomsdeclarationInfos/",
           data: this.data
        })
        .then(res => {
          console.log(res)
          let xyy = res.data.error_msg
          this.$message({
          message: '报关成功',
          type: 'success' 
        });
        this.$router.push({ path: '/menu2/sub1' })
          
          
        })
        }else{
           this.$message({
             message: '报关失败 ，缺少数据',
             type: 'success'
        });
        }
        }   
      },
      getcustomsdeclist(){
        console.log(this.AmazonOrderId)
        axios({
           method: "post",
           url: html.domain + "orders/getcustomsdeclist/",
           data: this.AmazonOrderId
        })
        .then(res => {
          let that = this
          that.success = res.data.success_msg
          console.log(that.success)
             for(let i =0 ; i<that.success.length;i++){
               if(that.success[i].CustomsDeclarationInfo == null){
                that.success[i].CustomsDeclarationInfo = {
                  address:'',
                  address2:'',
                  weight:'',
                  USD:'',
                  customs:'',
                  label:'',
                }
               }
              that.tableData.push({
          //console.log(this.tableData[0].address)
          // console.log(this.tableData[0].address2)
          // console.log(this.tableData[0].weight)
          // console.log(this.tableData[0].USD)
          // console.log(this.tableData[0].customs)
          // console.log(this.tableData[0].label)
              imgs : that.success[i].GoodsImage,
              name: that.success[i].Title,
              address:that.success[i].CustomsDeclarationInfo.ChineseCustomsDeclaration,
              address2:that.success[i].CustomsDeclarationInfo.EnglishCustomsDeclaration,
              weight:that.success[i].CustomsDeclarationInfo.Weight,
              USD:that.success[i].CustomsDeclarationInfo.Price,
              customs:that.success[i].CustomsDeclarationInfo.CustomsCode,
              label:that.success[i].CustomsDeclarationInfo.IsElectric,
              
              })
              console.log(that.success)
          }
        })
      },
    // goddd(){
    //   for(let i = 0 ; i<this.str.length;i++){
    //     if(
    //        this.tableData[i].address !== undefined &&
    //        this.tableData[i].address2 !== undefined &&
    //        this.tableData[i].weight !== undefined &&
    //        this.tableData[i].USD !== undefined &&
    //        this.tableData[i].customs !== undefined &&
    //        this.tableData[i].label !== undefined 
    //     ){
    //       console.log(250)
      //     axios({
      //     method: "post",
      //     url: html.domain + "orders/updateorderstatus/",
      //     data:{
      //       AmazonOrderId: this.str,
      //       OrderStatus: 'UnBilled',
      //     }
      //   })
      //   .then(res => {
      //     console.log(res)
      //   })
      //   }else{
      //   this.$message.error('错了哦，这是一条错误消息')
      //   }
      // }
  }
}

</script>
<style lang='scss' scoped>
.app{
    .top{
        line-height: 80px;
        font-size: 30px;
        color: #ccc;
        text-align: center;
        border-bottom: #ccc 1px solid;
        
    }
    .bottom{
        width: 100%;
        position: fixed;
        bottom: 0;
        height: 60px;
        text-align: right;
        border-top:solid 1px #ccc;
        line-height: 60px;
        box-sizing: border-box
        }
}
</style>